import React from 'react';

/*
  学习目标：PureComponent比较引用类型-浅比较
  浅比较只会比较内存地址
*/
export default class App extends React.Component {
  state = {
    list: [{ id: 1 }, { id: 2 }],
  };

  handleClick = () => {
    // // 👎不推荐的写法，会导致内存地址没变化， PureComponent会不更新
    // this.state.push({ id: 3 });
    // this.setState(this.state);

    // 👍 使用新值覆盖旧值 ： [] 表示是新数组，内存地址已经变化
    this.setState({
      list: [...this.state.list, { id: 3 }], // new Array()
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我修改数量</button>
        <Footer list={this.state.list}></Footer>
      </div>
    );
  }
}

class Footer extends React.PureComponent {
  render() {
    console.log('render被执行了  ----->  ');
    return (
      <div>
        <h1>
          {this.props.list.map((item) => {
            return <div>{item.id}</div>;
          })}
        </h1>
      </div>
    );
  }
}
